/*
 * @Author: cygao
 * @Last Modified by: cygao
 * @Last Modified time: 2017-11-26 22:43:18
 */
// 房源照片
<template>
  <div class="house-images-container">
    <div class="house-first-img">
      <div class="house-add-img">
        <label class="m-img" for="file">
          <input id="file" style="display:none;" type="file" >
          <img :src="coverImg" alt="">
        </label>
      </div>
      <div class="first-tag">首图</div>
    </div>
    <div class="image-items">
      <div class="house-add-img" v-for="(item, index) in imageNum" :key="index">
        <label class="m-img" :for="`file${index}`">
          <input :id="`file${index}`" style="display:none;" type="file" >
          <img :src="images[index]" alt="">
        </label>
        <span class="img-delete" v-show="images[index] !== imgDefault" @click="imageDel(index)">×</span>
      </div>
    </div>
    <div class="img-tips">
      *请添加2-12张图片，最少两张，最多12张
    </div>
    <div class="house-images-btn">
      <x-button class="btn" type="primary" @click.native="goHouseSet">完成</x-button>
    </div>
  </div>
</template>

<script>
import UploadFileByTXY from '../../../util/uploadFileByTXY'
export default {
  data () {
    return {
      imageNum: 1,
      // coverImg: require('../../../images/rentHouse/uploadImg.png'),
      coverImg: this.$route.query.firstImg,
      images: [], // 默认图片数组
      uploadImages: [], // 上传图片数组
      imgDefault: require('../../../images/rentHouse/uploadImg1.png') // 默认图片
    }
  },
  created () {
    for (let i = 0; i < 11; i++) {
      this.images[i] = this.imgDefault
    }
    this.doit()
    // this.img = this.$route.query.firstImg
  },
  mounted () {
    // 上传各种证件证书图片区域
    UploadFileByTXY.upload({
      id: 'file',
      callback: (res) => {
        this.coverImg = res.url
        // console.log('sss')
      }
    }, true)
    // for (let i = 0; i < 12; i++) {
    //   UploadFileByTXY.upload({
    //     id: 'file' + i,
    //     callback: (res) => {
    //       this.$set(this.images, i, res.url)
    //       console.log('++++++++++++sss')
    //     }
    //   }, true)
    // }
  },
  methods: {
    // addImg () {
    //   if (this.imageNum < 12) {
    //     this.imageNum += 1
    //     this.$nextTick(() => {
    //       UploadFileByTXY.upload({
    //         id: 'file' + (this.imageNum - 1),
    //         callback: (res) => {
    //           this.$set(this.images, (this.imageNum - 1), res.url)
    //           console.log('++++++++++++sss')
    //         }
    //       }, true)
    //     })
    //   } else {
    //     this.$vux.toast.text('最多12张照片！')
    //   }
    // },
    doit () {
      this.$nextTick(() => {
        UploadFileByTXY.upload({
          id: 'file' + (this.imageNum - 1),
          callback: (res) => {
            this.$vux.loading.hide()
            this.$set(this.images, (this.imageNum - 1), res.url)
            // console.log('++++++++++++sss')
            if (this.imageNum < 11) {
              this.imageNum += 1
              this.doit()
            } else {
              this.$vux.toast.text('最多12张照片！')
            }
          }
        }, true)
      })
    },
    imageDel (index) {
      if (this.images[10] !== this.imgDefault) {
        this.imageNum = 11
        this.$set(this.images, (this.imageNum - 1), this.imgDefault)
      } else {
        this.images.splice(index, 1)
        this.images.push(this.imgDefault)
        this.imageNum -= 1
      }
    },
    goHouseSet () {
      this.uploadImages.push(this.coverImg) // 掺入首图
      this.images.map(item => {
        if (item !== this.imgDefault) {
          this.uploadImages.push(item)
        }
      })
      if (this.uploadImages.length > 1) {
        let houseImagesData = {
          coverImg: this.coverImg,
          images: this.uploadImages
        }
        // console.log(this.uploadImages)
        localStorage.setItem('houseImages', JSON.stringify(houseImagesData))
        this.$router.push({path: './houseSet'})
      } else {
        this.$vux.toast.text('请上传至少两张房源照片')
      }
    }
  }
}
</script>

<style lang="less">
  .house-images-container{
    font-size: 15px;
    max-height: 100vh;
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .house-first-img{
      // width:100%;
      height: 230px;
      position: relative;
      .house-add-img{
        width:100%;
        // height: 5rem;
        box-sizing: border-box;
        position: relative;
        z-index: 10;
        .m-img{
          width:100%;
          border-radius: 0.125rem;
          img{
            position: relative;
            display: block;
            z-index: -1;
            width:100%;
            height: 230px;
            object-fit: cover;
          }
        }
      }
      .first-tag{
        width:100%;
        height:30px;
        text-align: center;
        line-height: 30px;
        background: #ccc;
        color: black;
        position: absolute;
        bottom: 0px;
        opacity: .5;
        left:0px;
      }
    }
    .image-items{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .house-add-img{
        width:32%;
        margin-top: 5px;
        margin-left: 1%;
        height: 77px;
        position: relative;
        border: 1px dotted #ccc;
        overflow: hidden;
        box-sizing: border-box;
        z-index: 10;
        .m-img{
          width:100%;
          border-radius: 0.125rem;
          img{
            position: relative;
            width:100%;
            display: block;
            object-fit: cover;
            z-index: -1;
            height: 77px;
          }
        }
        .img-delete{
          position: absolute;
          right: 0;
          top:0;
          width:20px;
          height:20px;
          line-height: 18px;
          color:#fff;
          background: red;
          border-radius: 50%;
          text-align: center;
          opacity: .7;
        }
      }
    }
    .house-images-btn{
      padding: 0 15px;
      margin-top: 72px;
    }
  }
</style>

